<!--
*@Author: QWP
*@Description: 灾害直报显示
*@Date: 2024-07-18 18:33:03
-->
<template>
  <u-card title="灾害事故直报">
    <a-timeline style="height: 630px;">
      <a-timeline-item v-for="item in datas">
        <a-row justify="space-between">
          <span style="font-family: PingFang SC, PingFang SC;font-weight: 400;font-size: 16px;color: #1890FF;line-height: 32px;">
            {{ item.title }}
          </span>
          <span style="font-family: PingFang SC, PingFang SC;font-weight: 400;font-size: 14px;color: #666666;line-height: 32px;">07/17</span>
        </a-row>
        <a-row style="font-family: PingFang SC, PingFang SC;font-weight: 400;font-size: 16px;color: #333333;line-height: 32px;overflow: hidden;
          text-overflow: ellipsis; white-space: nowrap;">
          {{ item.msg }}
        </a-row>
        <a-row style="font-family: PingFang SC, PingFang SC;font-weight: 400;font-size: 14px;color: #666666;line-height: 22px;">
          <span>开始时间: {{ item.sDate }}</span>
          <span>结束时间: {{ item.eDate }}</span>
          <span>死亡人数: {{ item.swNum }}</span>
        </a-row>
        <a-row style="font-family: PingFang SC, PingFang SC;font-weight: 400;font-size: 14px;color: #666666;line-height: 22px;">
          <span>受伤人数: {{ item.ssNum }}</span>
          <span>失踪人数: {{ item.shizongNum }}</span>
          <span>受灾人数: {{ item.souzaiNum }}</span>
          <span>受灾面积: {{ item.souzaiMj }}</span>
          <span>填报人: {{ item.tbr }}</span>
        </a-row>
      </a-timeline-item>
    </a-timeline>
  </u-card>
</template>

<script lang='ts' setup>
import { ref, reactive, computed, onMounted } from 'vue' 

import { useRoute, useRouter } from 'vue-router'
import { Item } from 'ant-design-vue/es/menu';

onMounted(() =>  {
  for(let i = 0; i <= 4; i++) {
    datas.push({
      title: `昌吉回族自治州吉木萨尔县发生暴雪灾害事件件`,
      msg: '2024年07月17日中国气象局和国土局联合发布按时地灾信息',
      sDate: '2024-07-17 11:00',
      eDate: '2024-07-17 18:00',
      swNum: 0,
      ssNum: 0,
      shizongNum: 0,
      souzaiNum: 0,
      souzaiMj: 0,
      tbr: '丁艳玲',
    })
  }
})

const datas = reactive<any[]>([])
</script>

<style lang='scss' scoped>
</style>